const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
// 1. 引入vueloader插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')



module.exports = {
    // 要打包的文件
    entry: path.resolve(__dirname, 'src/main.js'),
    // 打包之后生成的文件
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js'
    },
    // 启动开发服务时候的配置
    devServer: {
        // host:'0.0.0.0',
        host: '192.168.0.177',
        port: 3000,
        open: true,
        hot: true,
        // contentBase: 'src'
    },
    plugins: [
        new htmlWebpackPlugin({
            // 编译的html模板
            template: path.resolve(__dirname, 'src/index.html'),
            filename: 'index.html'
        }),
        // 确保引入了这个插件
        new VueLoaderPlugin()
    ],
    module: {
        rules: [{
            test: /\.vue$/,
            loader: 'vue-loader'
        }, {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }, {
            test: /\.less$/,
            use: ['style-loader', 'css-loader', 'less-loader']
        }, {
            test: /\.(jpg|png|gif|bmp|svg)$/,
            use: 'url-loader?limit=100000&name=[hash:8]-[name].[ext]'
        }, {
            test: /\.(woff|woff2|eot|ttf)$/,
            use: 'url-loader?limit=1000&name=[hash:8]-[name].[ext]'
        }, {
            test: /\.js$/,
            // 排除的部分，node_modules,1、没有必要2、node_modules特别大，打包比较慢
            exclude: /(node_modules|bower_components)/,
            // 使用数组和字符串配置，这里也可以使用对象配置，loader是js文件的处理模块，options是参数，里面参数的
            // 内容是根据不同loader有不同的内容，这里presets是指定babel-loader预置的翻译语法
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env']
                }
            }
        }]
    },
    resolve: {
        // 配置别名
        alias: { // 修改 Vue 被导入时候的包的路径
            // "vue$": "vue/dist/vue.js",
            "@": path.resolve(__dirname, "src"),
            "@components": path.resolve(__dirname, "src/components"),
        }
    }
}